<script minify>
App.component('AuthNav', ({ auth, logout }) => {
    return {
        $template: '#auth-nav-template',
        get auth() { return auth() },
        get displayName() {
            let auth = this.auth
            return auth ? auth.displayName || auth.firstName || auth.userName || auth.email : null
        },
        showPopup:false,
        mounted() {
            on(document.body, {
                click: e => this.showPopup = false
            })
        },
        logout: logout || (() => {})
    }
})
</script>
<!--minify-->
<template id="auth-nav-template">
<div class="ml-3 mt-1 relative z-10 bg-gray-50" @vue:mounted="mounted">
    <div v-if="auth">
        <div>
            <button type="button" @click.stop="showPopup = true"  
                    class="max-w-xs bg-white rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50"
                    aria-expanded="false" aria-haspopup="true">
                <img v-if="auth && auth.profileUrl" class="h-8 w-8 rounded-full text-gray-700" :src="auth && auth.profileUrl" alt="">
                <svg v-else class="h-8 w-8 rounded-full text-gray-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 8a5 5 0 1 0 5 5a5 5 0 0 0-5-5z" fill="currentColor"/>
                    <path d="M16 2a14 14 0 1 0 14 14A14.016 14.016 0 0 0 16 2zm7.992 22.926A5.002 5.002 0 0 0 19 20h-6a5.002 5.002 0 0 0-4.992 4.926a12 12 0 1 1 15.985 0z" fill="currentColor"/>
                </svg>
                <span class="hidden ml-3 text-gray-700 text-sm font-medium xl:block"><span class="sr-only">Open user menu for </span>{{ displayName }}</span>
                <!---: Heroicon name: solid/chevron-down -->
                <svg class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 xl:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
            </button>
        </div>
        <div :class="[showPopup ? 'z-20 transform opacity-100 scale-100' : 'transform opacity-0 scale-95 hidden','origin-top-right absolute right-0 mt-2 w-48 flex flex-col rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none']" 
             role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <a v-href="{ $page:'' }" 
               class="px-4 py-2 text-sm text-gray-700 text-left hover:bg-gray-50" role="menuitem" tabindex="-1">Your Profile</a>
            <button type="button" @click="logout" class="block px-4 py-2 text-sm text-gray-700 text-left hover:bg-gray-50" role="menuitem" tabindex="-1">Logout</button>
        </div>
        
    </div>
    <div v-else>
        <a class="max-w-xs bg-white rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50"
                id="user-signin-button" aria-expanded="false" aria-haspopup="true" v-href="{ $page:'' }">
            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M9.586 11L7.05 8.464L8.464 7.05l4.95 4.95l-4.95 4.95l-1.414-1.414L9.586 13H3v-2h6.586zM11 3h8c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2h-8v-2h8V5h-8V3z" fill="currentColor" fill-rule="evenodd"/>
            </svg>
            <span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block">Sign In</span>
        </a>
    </div>
</div>
</template>
<!--/minify-->
